import React, { Component } from "react";
import { ListViewPage, ListAdvanced } from "weaver-mobile-page";
import { toJS } from "mobx";
import { Icon, tools, Echarts } from 'weaver-mobile';
import { inject, observer } from "mobx-react"
import * as Util from "../../public/util";
import { withRouter } from 'react-router-dom';

import * as allFun from "../../../workflowForm/util/forwardPage";

const { getLabel } = tools;
@withRouter
@inject("detailListStore")
@observer
export default class DetailListComponent extends Component {

  componentDidMount() {
    const { pathname, detailListStore, formData, docCountData, location } = this.props;
    detailListStore.setListStorePath(pathname);
    const { listAd } = detailListStore;
    const seriesId = location.query && location.query.seriesId;
    detailListStore.setSeriesId(seriesId);
    let params = formData;
    if (seriesId == "echart1" || seriesId == "echart2" || seriesId == "echart3") {
      params = docCountData;
      listAd.getData({ url: ' /api/odoc/odocDocReport/getOdocDocReportDetailList', method: "POST", params: { ...params } });
    } else {
      listAd.getData({ url: '/api/odoc/odocReport/getOdocReportDetailList', method: "POST", params: { ...params } });
    }


    const { searchAdvancedStore } = listAd;
    searchAdvancedStore.getData({
      url: '/api/odoc/odocAccountList/getCondition',
      method: 'POST',
    });
    detailListStore.getUserId();
  }

  componentWillUnmount() {
    const { detailListStore } = this.props;
    detailListStore.setSeriesId("");
  }

  render() {
    const { detailListStore, pathname, formData } = this.props;
    const { listAd, seriesId } = detailListStore;
    let getTemplate = this.getTemplate;
    if (seriesId == "echart1" || seriesId == "echart2" || seriesId == "echart3") {
      getTemplate = this.getOdocTemplate;
    }
    return (
      <div>
        <ListAdvanced
          store={listAd}
          hasAdvanceSerach
          rowKey="requestid"
          searchKey="requestname"
          dataFetchOptions={{
            url: '/api/odoc/odocReport/getOdocReportDetailList',
            method: 'POST',
          }}
          conditionFetchOptions={{
            url: '/api/odoc/odocAccountList/getCondition',
            method: 'POST',
          }}
          onSearch={this.onSearch}
          getTemplate={getTemplate}
          onRowClick={rowData => this.forwardPage(rowData)}
        />
      </div>
    )
  }

  onSearch = () => {
    const { detailListStore, formData, location, docCountData } = this.props;
    const { listAd } = detailListStore
    const { searchAdvancedStore, listViewStore, searchParams, seriesId } = listAd;
    let params = { ...toJS(searchParams) };
    // 获取高级搜索参数
    if (searchAdvancedStore) {
      const { formParams } = searchAdvancedStore.form;
      const datas = Util.getFormData(toJS(formParams));
      let otherParams = datas;
      if (seriesId == "echart1" || seriesId == "echart2" || seriesId == "echart3") {
        otherParams = docCountData;
      }
      params = { ...datas, ...otherParams };
    }
    // 清除列表数据
    listViewStore.clearData();
    // 带参数请求列表数据
    listAd.getData({ url: '/api/odoc/odocReport/getOdocReportDetailList', method: 'POST', params });
  }


  getTemplate() {
    const newTemplate = {
      default: [
        // {
        //   key: 'col1',
        //   style: { flex: 'none' },
        //   render(item) {
        //     return <div className={`odoc-todo-table-item`}>{item.odoctypespan}</div>
        //   },
        // },
        {
          key: 'col2',
          configs: [
            {
              key: 'row1',
              configs: [{ key: 'requestnamenewspan' }],
            },
            {
              key: 'row2',
              style: { color: '#999999' },
              configs: [{ key: 'createrspan', style: { marginRight: '10px' }, }, { key: 'createdatespan' }],
            }
          ]
        },
      ],
    };
    return newTemplate;
  }

  getOdocTemplate() {
    const newTemplate = {
      default: [
        // {
        //   key: 'col1',
        //   style: { flex: 'none' },
        //   render(item) {
        //     return <div className={`odoc-todo-table-item`}>{item.odoctypespan}</div>
        //   },
        // },
        {
          key: 'col2',
          configs: [
            {
              key: 'row1',
              configs: [{ key: 'idspan' }],
            },
            {
              key: 'row2',
              style: { color: '#999999' },
              configs: [{ key: 'issued_useridspan', style: { marginRight: '10px' }, }, { key: 'written_datespan' }],
            }
          ]
        },
      ],
    };
    return newTemplate;
  }

  forwardPage(rowData) {
    const { detailListStore } = this.props;
    allFun.forwardViewForm('requestid=' + rowData.unoperators + '&f_weaver_belongto_userid=' + detailListStore.userId, (arg) => {
    }, "portal")
  }

}